
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    input {
        height: 30px
    }
    p{
        color: red;
        font-size: 4px;
    }
</style>

<body>
    <!-- 有一个密码输入框，要求输入内容：大小写字母开头，数字、大小写字母、下划线组成的长度为6~16位的字符组成。
    		如果用户输入的内容不符合这个规则，则在输入框下面显示错误信息。
    		输入合格内容时，输入框边框颜色变为‘green’：
    		输入错误信息时，输入框颜色变为‘red‘，并展示错误提示信息 -->
    <div>
        请输入密码：<input type="password" name="" id="">
        <p id="ts"></p>
    </div>
    <script>
        var input = document.querySelector('input');
        var reg = /^[a-zA-Z][0-9_]{6,16}$/;
        //当鼠标移开输入框时就执行一次函数
        input.addEventListener('blur',function(){
            // match() 方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。
            if(this.value.match(reg)){
                this.style.border = '1px solid green';
                ts.style.display = 'none';
            }else{
                this.style.border = '1px solid red';
                ts.style.display = 'block';
                ts.innerText = '请输入由字母、数字、下划线组成的6~16长度的字符串';
            }
        })
    </script>
</body>

</html>